<template>
        <div class="header_top">
                <div class="hd">
                    <div class="icon_"  @click="showPopup"  >
                        <img
                                src="~@/assets/meun.png"
                                alt=""
                        >
                    </div>
                    <div class="center" style="color:rgb(224,173,90)">{{infoList.wap_web_name}}</div>
                    <div class="right">
                        <div class="icon_"  @click="showPopup" style=" margin-right: 0.5rem;">
                            <img src="~@/assets/search.png"
                            >
                        </div>
                        <div class="icon_" @click="showOverlay = true" >
                            <img src="~@/assets/cart.png"
                            >
                        </div>
                    </div>
                </div>
            <van-popup
                v-model="show"
                position="top"
                :style="{ height: '100%' }"
            >
                <div
                    class="back_home"
                    @click="backToHome"
                >
                    <div class="icon_">
                        <img
                            src="~@/assets/home.png"
                            alt=""
                        >
                    </div>
                    <div class="word ocolor">回到首页</div>
                </div>
                <div class="search">
                    <van-search
                        v-model="value"
                        show-action
                        placeholder="院校信息，留学资讯，一手掌握"
                    >
                        <template #action>
                            <div @click="search">搜索</div>
                        </template>
                    </van-search>
                </div>
                <!-- <div class="university">
                    <div class="info_img">
                        <img src="~@/assets/meun1.png" alt="">
                    </div>
                    <van-cell
                        title="院校库"
                        is-link
                        @click="linkToYXK"
                    />
                </div> -->

                 <van-cell
                    title="成功案例"
                    is-link
                    @click="linkToCase"
                />

                <div class="abroad_news">
                    <div class="info_img">
                        <img src="~@/assets/meun2.png" alt="">
                    </div>
                    <van-cell
                        title="留学资讯"
                        is-link
                        @click="linkToLXZX"
                    />
                </div>
                <van-cell
                    title="了解我们"
                    is-link
                    @click="linkToUS"
                />
            </van-popup>
            <van-overlay :show="showOverlay" lock-scroll>
                <div class="wrapper">
                    <div class="block">
                        <img
                            :src="getImgUrl(infoList.wap_qr_code)"
                            style="display:block"
                            alt=""
                        >
                        <img
                            src="https://www.lxbird.com/static/img/intro/close.png"
                            @click="showOverlay = false"
                            style="margin: 1.2rem auto;display:block;width: 1.5rem;"
                            alt=""
                        >
                    </div>
                </div>
            </van-overlay>
        </div>
</template>

<script>
import {getConfig} from "./../../service/index";

export default {

  data() {
    return {
      value: "",
      show: false,
      showOverlay: false,
        infoList:{}
    };
  },
  created() {
        // this.reqData()
     let infoList = sessionStorage.getItem('system')
     this.infoList = JSON.parse(infoList)
  },
    methods: {
        async reqData(){
            let res = await getConfig();
            console.log(res);
            if(res.code == 200){
                this.infoList = res.data
            }
        },
        showPopup() {
      this.show = !this.show;
    },
    onSearch(val) {
    //   console.log(val);
      this.value = val
    },
    backToHome() {
      // console.log(this.$route)
      if (this.$route.path == "/home") {
        this.show = false;
      } else {
        this.$router.push({ path: "/home" });
      }
    },
    search() {
      this.$router.push({name:"search",params:{ searchValue:this.value}});
    },
      
        linkToYXK(){
            this.$router.push({path:'/moreUniversity'})
        },
        linkToLXZX(){
            this.$router.push({path:'/liuxue_news'})
        },
        linkToUS(){
            this.$router.push({path:'/about_us'})
        },
        linkToCase(){
            this.$router.push({path:'/CaseList'})
        }
  },
};
</script>

<style lang="less" >
    .van-overlay{
        z-index: 999 !important;
    }
    .hd{
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0.5rem 1rem;
    }
    .icon_{
        width: 1.2rem;
        height: 1.2rem;
    }
.word {
  font-size: 1rem;
  color: #00a4ff;
}
.back_home {
  display: flex;
  align-self: center;
  margin: 1rem;
  .icon_ {
    width: 1.2rem;
    height: 1.2rem;
    margin-right: 0.5rem;
  }
  .word {
    font-size: 1rem;
  }
}

.info_img {
  height: 7.8rem;
  width: 100%;
}
.university {
  margin: 1rem 0;
}
.right {
  display: flex;
    align-items: center;
}
.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  background: #2a4154;
}
.block {
  margin: 0 auto;
}
.header_top{
    width: 100%;
    position: fixed;
    background: white;
    z-index: 99;
    top: 0;
}
</style>
